<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">影院管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>影院列表</el-breadcrumb-item>
      <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
      <el-breadcrumb-item>配置座位模版</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-divider content-position="left">配置座位模版</el-divider>
    <!-- 配置座位模版内容 -->
    <el-container>
      <el-aside>
        <!-- 时间线 -->
        <el-timeline>
          <!-- 第一步 -->
          <el-timeline-item>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>编辑坐标系</span>
              </div>
              <el-form label-width="60px">
                <el-form-item label="行数">
                  <el-input
                    v-model="rows"
                    placeholder="请输入行数"
                    size="small"
                  ></el-input>
                </el-form-item>
                <el-form-item label="列数">
                  <el-input
                    v-model="cols"
                    placeholder="请输入列数"
                    size="small"
                  ></el-input>
                </el-form-item>
                <el-button
                  type="primary"
                  plain
                  style="width: 100%"
                  size="small"
                  @click="step1"
                  >生成座位模版</el-button
                >
              </el-form>
            </el-card>
          </el-timeline-item>
          <!-- 第二步 -->
          <el-timeline-item>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>选择座位区域(框选)</span>
              </div>
              <el-button
                type="primary"
                plain
                style="width: 100%"
                size="small"
                @click="step2"
                >撤销选中</el-button
              >
            </el-card>
          </el-timeline-item>
          <!-- 第三步 -->
          <el-timeline-item>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>选择座位类型</span>
              </div>
              <el-button
                type="primary"
                plain
                style="width: 100%"
                size="small"
                @click="step3_1"
                >普通座位</el-button
              >
              <br /><br />
              <el-button
                type="primary"
                plain
                style="width: 100%"
                size="small"
                @click="step3_2"
                >过道</el-button
              >
            </el-card>
          </el-timeline-item>
          <!-- 第四步 -->
          <el-timeline-item>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>确认模版</span>
              </div>
              <el-button
                type="success"
                plain
                style="width: 100%"
                size="small"
                @click="step4()"
                >确认</el-button
              >
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-aside>
      <el-main>
        <el-divider></el-divider>
        <el-divider>电影荧屏</el-divider>
        <!-- 提示文本 -->
        <div class="tip" style="text-align: center; margin-bottom: 20px">
          <div class="tip-item" style="background: #36d6"></div>
          未选择座位 &nbsp;&nbsp;
          <div class="tip-item" style="background: #36d"></div>
          已选择座位&nbsp;&nbsp;
          <div class="tip-item" style="background: #a11"></div>
          普通座位&nbsp;&nbsp;
          <div class="tip-item" style="background: #333"></div>
          过道&nbsp;&nbsp;
        </div>
        <canvas id="canvas"></canvas>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import SeatSelector from "@/libs/SeatSelector.js";
export default {
  data() {
    return {
      rows: 0,
      cols: 0,
      seatSelector: null, //座位模版对象
      id: this.$route.params.id, //放映厅id
    };
  },
  methods: {
    //确认
    step4() {
      if (this.seatSelector) {
        try {
          let seat_template = this.seatSelector.getSeatTemplateJsonString();
          let room_size = this.seatSelector.getSeatCount();
          let id = this.id;
          //发请求,更新放映厅座位模版
          this.$http.CinemaRoomApi.updateSeatTemplate({
            id,
            seat_template,
            room_size,
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message.success("更新放映厅模版完成");
              this.$router.go(-1);
            }
          });
        } catch (error) {
          this.$message.error(error);
        }
      }
    },
    //设置选中的座位为过道
    step3_2() {
      if (this.seatSelector) {
        this.seatSelector.setSelectedSeatsToGangway();
      }
    },
    //设置选中的座位为普通座位
    step3_1() {
      if (this.seatSelector) {
        this.seatSelector.setSelectedSeatsToNormalSeats();
      }
    },
    //撤销选中
    step2() {
      if (this.seatSelector) {
        this.seatSelector.setNoSelect();
      }
    },
    //生成座位模板
    step1() {
      let row = parseInt(this.rows);
      let col = parseInt(this.cols);
      this.seatSelector = new SeatSelector(row, col, "canvas"); //创建seatSelector对象，传入行数、列数、canvas
      this.seatSelector.draw(); //将座位模版 绘制在  canvas中
    },
  },
};
</script>
<style scoped>
#canvas {
  border: 1px dashed #999;
  border-radius: 4px;
  display: none;
  margin: 0 auto;
}
.tip {
  text-align: center;
  margin-bottom: 20px;
}
.tip-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>
  
